<template>
  <Transition name="mask">
    <div class="toast-mask" v-show="isShowError">{{ errorMsg }}</div>
  </Transition>
</template>

<script>
export default {
  /**提示信息组件*/
  name: "showMessage",
  data(){
    return{
      isShowError: false,
      errorMsg: '',
    }
  },
  methods:{
    // 显示信息
    showErrorMsg(msg) {
      this.errorMsg = msg
      this.isShowError = true
      setTimeout(() => {
        this.isShowError = false
      }, 2000)
    },
  }
}
</script>

<style scoped>
.toast-mask {
  position: fixed;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 8px 12px;
  transform: translate(-50%, -50%);
  background: rgba(51, 51, 51, .8);
  border-radius: 4px;
  z-index: 3000;
  font-size: 14px;
  color: #fff;
}
</style>
